<template>
  <div class="page">
    <div class="main">
      <!-- 1 -->
      <a-divider dashed>
        <div class="diver">
          <div class="diver-index">1</div>
          <div>协议主体</div>
        </div>
      </a-divider>

      <a-card>
        <a-form :labelCol="{ span: 6 }" :wrapperCol="{ span: 16 }">
          <a-row :gutter="20">
            <a-col :span="12">
              <a-form-item label="协议客户" name="name" :rules="[{ required: true, message: 'Required!' }]">
                <a-button class="w-100">选择客户</a-button>
                <view class="name">上海正也医药有限公司</view>
              </a-form-item>
              <a-form-item label="购进指标">
                <div class="display">
                  <a-select value="1" class="w-100">
                    <a-select-option value="1">金额</a-select-option>
                  </a-select>
                  <a-input placeholder="输入金额/数量" disabled></a-input>
                </div>
              </a-form-item>
              <a-form-item label="销售区域">
                <div>
                  <a-button class="w-100">选择区域</a-button>
                  <a-tag color="blue" closable>全国</a-tag>
                </div>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="协议状态" :wrapperCol="{ span: 8 }">
                <a-select value="1">
                  <a-select-option value="1">正常</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="纯销指标">
                <div class="display">
                  <a-select value="1" class="w-100">
                    <a-select-option value="1">金额</a-select-option>
                  </a-select>
                  <a-input placeholder="输入金额/数量" disabled></a-input>
                </div>
              </a-form-item>
              <a-form-item label="签订时间">
                <a-date-picker show-time placeholder="Select Time" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-form-item label="购进渠道" :labelCol="{ span: 3 }" :wrapperCol="{ span: 21 }">
            <div class="display">
              <a-select value="1" class="w-100">
                <a-select-option value="1">指定渠道</a-select-option>
              </a-select>
              <a-button class="w-100">选择渠道</a-button>
            </div>
          </a-form-item>
          <a-form-item :wrapperCol="{ offset: 3 }">
            <a-table :dataSource="dataSource" :columns="columns" :pagination="false" size="small" />
          </a-form-item>
        </a-form>
      </a-card>

      <!-- 2 -->
      <a-divider dashed>
        <div class="diver">
          <div class="diver-index">2</div>
          <div>产品政策</div>
        </div>
      </a-divider>

      <div class="detals">
        <a-button type="primary">添加产品</a-button>
        <template v-for="(item, idx) in details" :key="idx">
          <div class="detail-item">
            <span>{{ item.label }}</span>
            <span>{{ item.value }}</span>
          </div>
        </template>
      </div>
      <a-card>
        <template #title>
          <a-form layout="inline">
            <a-form-item label="产品">
              <a-button class="w-100">选择产品</a-button>
              <a>美复胶丸 24粒/盒</a>
            </a-form-item>
            <a-form-item label="协议效期">
              <a-range-picker format="YYYY/MM/DD" />
            </a-form-item>
          </a-form>
        </template>
        <template #extra>
          <a-button :style="{ color: '#FEBD62' }">删除</a-button>
        </template>
        <a-table :dataSource="formData" :columns="columns1" :pagination="false" size="small" :scroll="{x:1500}">
          <template #bodyCell>
            <a-input placeholder="请输入" />
          </template>
        </a-table>
        <a-table :dataSource="formData" :columns="columns2" :pagination="false" size="small" :scroll="{x:1500}">
          <template #bodyCell="{ column }">
            <template v-if="['x1', 'x3', 'x5'].includes(column.dataIndex)">
              <a-input placeholder="请输入" />
            </template>
            <template v-else-if="['x2'].includes(column.dataIndex)">
              <a-select value="1" style="margin: -5px 0">
                <a-select-option value="1">单选项1</a-select-option>
              </a-select>
            </template>
            <template v-else-if="['x4', 'x6'].includes(column.dataIndex)">
              <a-select mode="multiple" :value="['1']" style="margin: -5px 0">
                <a-select-option value="1">多选项1</a-select-option>
                <a-select-option value="2">多选项2</a-select-option>
              </a-select>
            </template>
            <template v-else-if="['x7', 'x8'].includes(column.dataIndex)">
              <a-date-picker />
            </template>
          </template>
        </a-table>
      </a-card>

      <!-- 3 -->
      <a-divider dashed>
        <div class="diver">
          <div class="diver-index">3</div>
          <div>补充协议</div>
        </div>
      </a-divider>

      <a-tabs v-model:activeKey="activeKey" type="card">
        <template #rightExtra>
          <a-button type="primary">新增</a-button>
        </template>
        <a-tab-pane v-for="idx in 3" :key="idx" :tab="'补充协议' + (idx + 1)">
          <a-card>
            <div class="title">
              协议内容：
              <a-button :style="{ color: '#FEBD62' }">删除</a-button>
            </div>
            <a-textarea :rows="4" disabled />
          </a-card>
        </a-tab-pane>
      </a-tabs>
    </div>

    <div class="footer">
      <a-button type="primary">保存</a-button>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
const dataSource = reactive([
  {
    key: '1',
    code: 'BJ000090',
    name: '宁波九州通药业有限公司',
    province: '浙江省',
  },
  {
    key: '2',
    code: 'BJ000192',
    name: '国药控股精华有限公司',
    province: '浙江省',
  },
  {
    key: '3',
    code: 'BJ000283',
    name: '老百姓药业有限公司',
    province: '浙江省',
  }
])
const columns = reactive([
  {
    title: '指定渠道编码',
    dataIndex: 'code',
    key: 'code',
  },
  {
    title: '指定渠道名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '所在省',
    dataIndex: 'province',
    key: 'province',
  },
])

const columns1 = reactive([{
  title: '协议价（元）',
  dataIndex: 'x1',
  key: 'x1',
}, {
  title: '票折（元）',
  dataIndex: 'x2',
  key: 'x2',
}, {
  title: '进购指标量（大单位）',
  dataIndex: 'x3',
  key: 'x3',
}, {
  title: '进购指标量（小单位）',
  dataIndex: 'x4',
  key: 'x4',
}, {
  title: '进购金额（万元）',
  dataIndex: 'x5',
  key: 'x5',
}, {
  title: '纯销指标量（小单位）',
  dataIndex: 'x6',
  key: 'x6',
}, {
  title: '纯销指标金额（万元）',
  dataIndex: 'x7',
  key: 'x7',
}])
const columns2 = reactive([{
  title: '分销奖励',
  dataIndex: 'x1',
  key: 'x1',
}, {
  title: '费用科目',
  dataIndex: 'x2',
  key: 'x2',
}, {
  title: '零售配送',
  dataIndex: 'x3',
  key: 'x3',
}, {
  title: '费用科目',
  dataIndex: 'x4',
  key: 'x4',
}, {
  title: '医疗配送商',
  dataIndex: 'x5',
  key: 'x5',
}, {
  title: '费用科目',
  dataIndex: 'x6',
  key: 'x6',
}, {
  title: '自定义7',
  dataIndex: 'x7',
  key: 'x7',
}, {
  title: '自定义8',
  dataIndex: 'x8',
  key: 'x8',
}])
const formData = reactive([{}])

const details = reactive([
  {
    label: '进购总指标（万元）：',
    value: '¥152.65'
  }, {
    label: '指标按季度分解（万元）：',
    value: '【Q1】¥12.5，【Q2】¥12.5，【Q3】¥12.5，【Q4】¥12.5'
  }, {
    label: '纯销总指标（万元）:',
    value: '¥152.65'
  }
])
</script>

<style lang="less" scoped>
.page {
  height: calc(100% - 80px);
  overflow-y: scroll;
}

.main {
  padding: 0 24px;
}

.diver {
  display: flex;
  align-items: center;

  .diver-index {
    color: #FFFFFF;
    background-color: #1890FF;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    text-align: center;
    line-height: 16px;
    font-size: 12px;
  }
}

.name {
  white-space: nowrap;
}

.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.detals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;

  .detail-item {
    margin: 0 24px;
    white-space: nowrap;
  }
}

.footer {
  height: 64px;
  line-height: 64px;
  padding: 0 24px;
  margin-top: 24px;
  background: #FFFFFF;
}

.w-100 {
  flex-shrink: 0;
  width: 100px;
  margin-right: 10px;
}

.display {
  display: flex;
}

/deep/.ant-tag-close-icon {
  margin-left: 10px;
}

/deep/.ant-tag {
  padding: 4px;
}

/deep/.ant-tabs-top>.ant-tabs-nav,
/deep/.ant-tabs-card.ant-tabs-top>.ant-tabs-nav .ant-tabs-tab+.ant-tabs-tab {
  margin: 0;
}
</style>
